<template>
  <div class="Recommended">
    <div class="head">
      <div class="ift-back" @click="returns"></div>
      <h1>小编私藏推荐</h1>
      <div></div>
    </div>
    <ul class="hotspot">
      <li v-for="(item, index) in image" :key="index" >
        <div class="title">
          <p>{{ item.names }}</p>
          <p>{{ item.js }}</p>
          <div>
            <span v-for="(k, i) in item.fl" :key="i">{{ k }}</span>
          </div>
        </div>
        <div class="imgs" @click="details(item.id)">
          <img :src="item.OuterLayer" alt="" />
        </div>
        <div class="Collection">
          <div>
            <p v-show="!item.flag" @click="flags(index)">
              <i class="ift-add"></i>收藏
            </p>
            <p v-show="item.flag" @click="dels(index)">已收藏</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      collect: [],
      image: [],
      add: [],
    };
  },
  methods: {
    details(id) {
      this.$router.push({ name: "details", query: { id: id } });
    },
    flags(index) {
      this.$store.commit("add", index);
      Toast("主人，新书已放好，看我看我~");
    },
    dels(index) {
      this.$store.commit("del", index);
    },
    returns() {
      this.$router.go("-1");
    },
  },
  created() {
    this.image = this.$store.state.image;
  },
};
</script>
<style lang="less">
.Recommended {
  .head {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 96%;
    padding: 0 2%;
    height: 45px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    div {
      width: 45px;
      font-size: 20px;
      color: #fc6976;
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
      color: #fc6976;
    }
    h2 {
      width: 45px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .hotspot {
    width: 96%;
    margin: 0 auto;
    height: 100vh;
    padding-top: 45px;
    li {
      font-size: 14px;
      height: 16%;
      margin: 5% 0;
      &:nth-last-child(1) {
        padding-bottom: 70px;
      }
      .title {
        width: 50%;
        height: 100%;
        margin-left: 5%;
        display: inline-block;
        position: relative;
        p {
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          word-break: break-all;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #555;
          &:nth-child(1) {
            font-weight: 600;
          }
        }
        div {
          width: 100%;
          position: absolute;
          bottom: 0;
          font-size: 12px;
          color: #999;
          span {
            margin-right: 4%;
            border: 1px solid #999;
            border-radius: 10px;
            padding: 0 2%;
          }
        }
      }
      .imgs {
        float: left;
        height: 100%;
        width: 25%;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          position: absolute;
          top: -10%;
          left: 0;
        }
      }
      .Collection {
        width: 20%;
        height: 100%;
        float: right;
        div {
          position: relative;
          margin: 0 auto;
          height: 100%;
          p {
            padding: 2px 5px;
            position: absolute;
            right: 0;
            top: 20%;
            background-color: #fc6976;
            color: white;
            font-size: 12px;
            border-radius: 10px;
            &:nth-child(2) {
              background: #f5f5f5;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>